<template>
  <div id="equcla">
    <!-- 装备分类 -->
    <div>
      <h1
        style="
          font-weight: 700;
          font-style: normal;
          font-size: 24px;
          color: #344563;
        "
      >
        货位信息
      </h1>
      <el-button type="primary" round size="mediu" @click="addDialog=true"
        >添加区域</el-button
      >
    </div>
    <div>
      <el-table
        :data="tableData"
        style="width: 100%"
        row-key="id"
        lazy
        :tree-props="{ children: 'wlocations', hasChildren: 'hasChildren' }"
      >
        <el-table-column
          prop="name"
          label="区域名称"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="count" label="货位数" align="center">
        </el-table-column>
        <el-table-column label="操作" width="300" align="center">
          <template slot-scope="scope">
            <el-button
              type="warning"
              plain
              size="mini"
              @click="openAdd(scope.row.id)"
              v-if="display(scope.row) == 0"
              ><i class="el-icon-plus" style="font-size: 15px"></i
            ></el-button>
            <el-button
              type="primary"
              plain
              size="mini"
              @click="openEdit(scope.row)"
              ><i class="el-icon-edit-outline" style="font-size: 15px"></i
            ></el-button>
            <el-button
              type="danger"
              plain
              size="mini"
              @click="openDel(scope.row)"
              ><i class="el-icon-delete" style="font-size: 15px"></i
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  <div class="pagination">
      <div style="display: flex; align-items: center">
        <span style="font-size: 13px; font-weight: bold"
          >共{{ Math.ceil(total / limit) }}页/{{ total }}条数据</span
        >
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="page"
            :page-size="limit"
            layout="prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 新增 -->
    <el-dialog title="新增区域" :visible.sync="addDialog" class="bjk">
      <el-form :model="formAdd">
        <el-form-item label="区域名称" :label-width="formLabelWidth">
          <el-input
            v-model="formAdd.name"
            autocomplete="off"
            placeholder="请输入区域名称"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialog = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 编辑 -->
    <el-dialog title="编辑分类" :visible.sync="editDialog" class="bjk">
      <el-form :model="formEdit">
        <el-form-item label="分类名称" :label-width="formLabelWidth">
          <el-input
            v-model="formEdit.name"
            autocomplete="off"
            placeholder="请输入分类名称"
            :value="formEdit.id"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialog = false">取 消</el-button>
        <el-button type="primary" @click="edit">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 删除 -->
    <el-dialog title="删除确认" :visible.sync="delDialog" class="bjk">
      <el-form> 删除该条客户信息后将不可恢复，确认删除？ </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="delDialog = false">取 消</el-button>
        <el-button type="primary" @click="del">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
      ],
      formAdd: {
        name:'',
        id:null
      },
      formEdit: {
        name:'',
        id:null
      },
      formDel: {
        name:'',
        id:null
      },
      addDialog:false,
      editDialog: false,
      delDialog: false,
      formLabelWidth: "80px",
      page: 1,
      limit: 5,
      total: 0,
    };
  },
  methods: {
    getData:function(){
      this.$axios({
        url:'/dlocaltion/list',
        method:'get',
        data:{
          limit: this.limit,
          page: this.page,
        }
      }).then(({data})=>{
        console.log(data.data)
         if (data.code == 0) {
        this.tableData = data.data;
        this.total = data.total;
      } else {
        this.$message.error("获取数据失败！");
      }
      })
    },
    display(v) {
      for (let i = 0; i < this.tableData.length; i++) {
        if (v.name == this.tableData[i].name) {
          return 0;
        }
      }
      return 1;
    },
    openEdit(v){
      this.editDialog=true;
      this.formEdit={...v};
    },
    openDel (v) {
      this.delDialog=true;
      this.formDel.name=v.name;
      this.formDel.id=v.id;
      console.log(this.formDel.name);
    },
    openAdd(id) {
      this.addDialog = true;
      if (id) {
        this.formAdd.id = id;
      }
    },
    add() {
      if (this.formAdd.id) {
        this.$axios({
          url: "/wlocation/add",
          method: "post",
          data: {
            wlocationName: this.formAdd.name,
            wregionId: this.formAdd.id
          },
        }).then(({ data }) => {
          if (data.code == 0) {
            this.$message.success("添加成功！");
            this.formAdd={},
              this.getData();
            this.addDialog=false;
          } else {
            this.$message.error("添加失败！");
            this.formAdd={},
            this.addDialog=false;
          }
        });
      } else {
        
        this.$axios({
          url: "/dlocaltion/add",
          method: "post",
          params: {
            wRegionName:this.formAdd.name,
          },
        }).then(({ data }) => {
          if (data.code == 0) {
             this.$message.success('添加成功')
              this.addDialog = false;
              this.getData();
          } else {
            this.$message.error("添加失败！");
            this.formAdd={},
            this.addDialog = false;
          }
        });
      }
    },
//     add() {
//       if(this.formAdd.id){
//         this.$axios({
//           url:'/wlocation/add',
//           method:"post",
//           data:{
//             wlocationName: this.formAdd.name,
//             wregionId: this.formAdd.id
//   },
// }).then(({data})=>{
//   this.$message.success("添加成功！");
//   this.formAdd={},
//   this.getData();
//   this.addDialog=false;
// }else{
//             this.$message.error('添加失败')
//             this.formAdd={},
//             this.addDialog = false;
// }
//           });
//     }else{
//         this.$axios({
//         url:'/dlocaltion/add',
//         method:'post',
//         params:{
//           wRegionName:this.formAdd.wRegionName,
//         },
//       }).then(({data})=>{
//        if(data.code==0){
//             this.$message.success('添加成功')
//             this.addDialog = false;
//             this.getData();
//        }else{
//         this.$message.error('添加失败')
//        }
//       });
//     }
//     },
    edit(){
      if(this.formEdit.wlocationName){
        this.$axios({
          url:'/dlocaltion/updateWlocationName',
          method:'post',
          data:{
             wlocationId: this.formEdit.id,
           wlocationName: this.formEdit.name,
          }
        }).then(({data})=>{
          if(data.code==0){
            this.$message.success("修改成功！");
            this.getData();
            this.editDialog=false;
          }else{
            this.$message.error("修改失败！");
          }
        });
      }else{
        this.$axios({
    url:'/dlocaltion/updateWregionName',
    method:'post',
    data:{
      name:this.formEdit.name,
      id:this.formEdit.id
    }
   }).then(({data})=>{
    if(data.msg=='一切ok'){
     this.$message.success('编辑成功')
    this.editDialog = false;
    this.getData();
     }else{
     this.$message.error('编辑错误')
    }
    })
      }
    },
    del(){
      if(this.formDel.wLocationName){
        this.$axios({
          url: "/dlocaltion/deleteWlocation",
          data: {
            wLocationName:this.formDel.name,
          },
        }).then(({ data }) => {
          if (data.code == 0) {
            this.$message.success("删除成功！");
            this.getData();
            this.delDialog = false;
          } else {
            this.$message.error(data.msg);
          }
        });
      }else{
         this.$axios({
        url:'/dlocaltion/deleteWregion',
        method:'get',
        params:{
          wRegionId:this.formDel.id,
        }
      }).then(({data})=>{
         if(data.code==0){
          this.$message.success('删除成功'),
          this.delDialog = false;
          this.getData();
        }else{
          this.$message.error('删除失败')
        }
      })
      }
    },
     toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getData();
    },
  },
   mounted: function () {
    this.getData();
  },
};
</script>

<style scoped lang="less">
#equcla {
  padding: 30px;
}
#equcla > div {
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}
.bjk {
  width: 800px;
  height: 350px;
  position: absolute;
  left: calc(50% - 200px);
}
.pagination {
  position: absolute;
  right: 30px;
  display: flex;
  margin-top: 50px;
  margin-right: 20px;
}
</style>